<template>
  <Dialog ref="dialog" width="800" title="AI智能推荐引擎 ">
    <div class="reportSize">
      AI推荐引擎基于考生分数、位次、线差、选考、测评等维度，依据大学历5年招生录取数据和专业办学情况等30多项维度进行综合分析计算，通过机器深度学习600多万张过往考生志愿表再次修正，精准率极高。
    </div>
    <div class="echarts-box">
      <div ref="main" id="myEcharts" style="height: 300px; width: 500px"></div>
    </div>
    <div class="tzySize">
      志愿填报小技巧——冲稳保：从录取概率小的大学（冲刺的）开始，到录取概率大的大学（保底的），逐一投档，尽可能不浪费分数被大学录取。
    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      :header-cell-style="{ 'border-bottom': 'none' }"
      :header-row-style="{ height: '60px' }"
      :cell-style="{ height: '60px', 'border-bottom': 'none' }"
    >
      <el-table-column prop="num_985" label="985" align="center" />
      <el-table-column prop="num_211" label="211" align="center" />
      <el-table-column prop="num_dual_class" label="双一流" align="center" />
      <el-table-column prop="num_shengzd" label="省属重点" align="center" />
      <el-table-column prop="num_public" label="公办" align="center" />
      <el-table-column prop="num_private" label="民办" align="center" />
    </el-table>
    <div class="center matop">
      <el-button
        type="primary"
        class="height40"
        style="width: 200px"
        @click="dialog.closeChange()"
        >立即查看</el-button
      >
    </div>
  </Dialog>
</template>
<script setup>
import { ref } from 'vue';
import Dialog from '@/components/Dialog/Dialog.vue';

const dialog = ref(null);

import * as echarts from 'echarts';

const main = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value

// 冲保稳统计数据
const tableData = ref([]);
const summary = ref({});

const init = () => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value, 'null', {
    width: 500,
    height: 350,
  });
  // 指定图表的配置项和数据
  var option = {
    tooltip: {
      trigger: 'item',
    },
    graphic: [
      {
        //环形图中间添加文字
        type: 'text', //通过不同top值可以设置上下显示
        left: 'center',
        top: 'center',
        style: {
          text:
            `学校 ` +
            (summary.value.chance_lv_1 +
              summary.value.chance_lv_2 +
              summary.value.chance_lv_3),
          textAlign: 'center',
          fill: '#1E7CE8', //文字的颜色
          fontSize: 20,
          lineHeight: 20,
        },
      },
    ],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          {
            value: summary.value.chance_lv_1,
            name: '需冲刺',
          },
          {
            value: summary.value.chance_lv_2,
            name: '较稳妥',
          },
          {
            value: summary.value.chance_lv_3,
            name: '可保底',
          },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};

function openChange(val) {
  tableData.value = [val];
  summary.value = val;

  dialog.value.openChange();
  setTimeout(() => {
    init();
  }, 500);
}

defineExpose({
  openChange,
});
</script>
<style lang="scss" scoped>
.reportSize {
  color: #999;
  font-size: 12px;
  padding-top: 10px;
}

.echarts-box {
  display: flex;
  justify-content: center;
}

.tzySize {
  padding: 30px 20px;
  color: #4e5969;
  font-size: 14px;
  word-break: break-all;
  margin-bottom: 18px;
}
</style>
